<template>
  <div class="container">
    <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="onClickLeft" />

    <!-- 列表组件 -->
    <van-sticky :offset-top="46">
      <van-list v-model="loading" :finished="finished" @load="onLoad">
        <van-cell v-for="(item, index) in cartList" :key="index">
          <van-swipe-cell>
            <van-card
              :num="item.num"
              :price="item.price"
              :title="item.name"
              class="goods-card"
              :origin-price="item.oldPrice"
            >
              <template #tags>
                <van-tag plain type="danger">规格：共999件</van-tag>
              </template>
              <template #thumb>
                <div class="left-thumb">
                  <van-checkbox
                    v-model="item.state"
                    @click="setSingleState"
                  ></van-checkbox>
                  <img :src="item.url" alt="" width="70%" />
                </div>
              </template>
              <template #footer>
                <van-stepper v-model="item.num" theme="round" button-size="22" />
              </template>
            </van-card>

            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="deleteProduct(item.id)"
              />
            </template>
          </van-swipe-cell>
        </van-cell>
      </van-list>

      <!-- 提交订单组件 -->
      <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
        <van-checkbox :value="stateAll" @click="setStateAll">全选</van-checkbox>
        <template #tip>
          你的收货地址不支持同城送,
          <span class="update" @click="onClickEditAddress">修改地址</span>
        </template>
      </van-submit-bar>
      <!-- 底部导航组件 -->
      <Buttom-Tabbar></Buttom-Tabbar>
    </van-sticky>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      loading: false,
      finished: false,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },

    ...mapActions(["setSingleState", "setStateAll", "deleteProduct"]),

    onSubmit() {
      this.$router.push({ path: "/order" });
    },
    onLoad() {
      this.finished = true;
    },
    onClickEditAddress() {
      this.$router.push({ path: "./address" });
    },
  },
  computed: {
    ...mapGetters(["stateAll", "cartList", "totalPrice"]),
  },
};
</script>

<style scoped>
.container {
  height: 750px;
  background: linear-gradient(#ffcc33 20%, #f0f0f0 30%) !important;
}
.goods-card {
  margin: 0;
  background-color: white;
}
.van-list {
  height: 430px;

  flex-grow: 1;
  overflow: auto;
}
.van-nav-bar {
  background-color: yellowgreen;
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
}
.left-thumb {
  display: flex;
}
.van-submit-bar {
  margin-bottom: 50px;
}

.update {
  color: skyblue;
}
</style>
